<script setup lang="ts">
import { ref } from 'vue';
import BGPage from './components/BGPage.vue';
import GifBGPage from './components/GifBGPage.vue';
import Pane from './components/Pane.vue';
import Table from './components/Table.vue';
import EchartDemo from './components/EchartDemo.vue';
import EChartsStudy from './components/EChartsStudy.vue';
import ClassRomOnline from './components/ClassRomOnline.vue';

// let isShowGifBG = ref(false)
</script>

<template>

  <div class="main">
      <BGPage>
        <div class="title">
            <span>爱仪监控大屏</span>
        </div>
        <div class="context">
          <div class="row1">
              <EchartDemo style="width: 100%; height: 40vh;"></EchartDemo>
              <EChartsStudy style="width: 100%;height: 40vh;"></EChartsStudy>
              <Pane style="width: 100%; height: 40vh;"></Pane>
          </div>
           <div class="row2">
               <ClassRomOnline style="width: 67vw;height: 50vh;">
                  <Table style="width: 33vw; height: 50vh;"></Table>
            
        </ClassRomOnline>
        <Table style="width: 33vw;height: 50vh;"></Table>
        </div>
        </div>

      </BGPage>
      <GifBGPage>

      </GifBGPage>
  </div>
</template>

<style scoped>
.row1{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.row2{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.main{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.title{
  background: url(../image/title_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 10%;
  /* font-family: AlibabaP; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.title>span{
  font-size: 3.5vw;
  color: aliceblue;
}
</style>
